<template>
  <div class="container">
    <!-- 头部组件 -->
    <header class="header">
      <HeaderBar @showHeaderDilog="handleShowHeaderDilog" :headerTitle="title"></HeaderBar>
      <!-- 头部弹出框组件- vue过度动画组件 -->
      <transition name="fade">
        <HeaderDialog v-show="isHeaderShow"></HeaderDialog>
      </transition>
    </header>

    <nav>
      {{ allChecked }}
      <input @change="onAllCheckedChange" v-model="allChecked" style="width: 50px; height: 50px" type="checkbox" />
    </nav>

    <main class="main">
      <!-- 列表组件 -->
      <CartItem @onChange="onCheckedItemChange" @onRemoveItem="onRemoveItem" :list="list"></CartItem>
    </main>
    <!-- 总价组件 -->
    <TotalPrice :totalPrice="totalPrice"></TotalPrice>
    <footer class="footer"></footer>
  </div>
</template>

<script>
import axios from 'axios'

import HeaderBar from './components/HeaderBar.vue'
import CartItem from './components/CartListItem.vue'
import HeaderDialog from './components/HeaderDialog.vue'
import TotalPrice from './components/TotalPrice.vue'
// 计算总价，可以用vue中的什么？
export default {
  components: {
    HeaderBar,
    CartItem,
    HeaderDialog,
    TotalPrice,
  },
  data() {
    return {
      opt: {
        page: 1,
        size: 2,
      },
      title: '购物车',
      list: [],
      isHeaderShow: false,
      allChecked: false,
    }
  },
  created() {
    this.getCartData()
  },
  computed: {
    totalPrice() {
      return this.list.reduce((num, item) => {
        return num + item.count * item.price
      }, 0)
    },
  },
  // 监听属性
  watch: {
    // list(v) {
    //   console.log(v, 'v')
    // },
    // allChecked(v) {
    //   console.log(v, 'v')
    //   // 全选事件
    //   this.list.forEach((item) => {
    //     item.checked = v
    //   })
    // },
  },
  methods: {
    // 请求数据
    async getCartData() {
      const res = await axios.get(`/api/cartData?_page=${this.opt.page}&_limit=${this.opt.size}`)
      console.log(res.data)
      this.list = res.data
    },
    // 显示隐藏头部弹出框组件
    handleShowHeaderDilog() {
      this.isHeaderShow = !this.isHeaderShow
    },
    /**
     * 全选和反选功能，需要借助 change事件，不能直接使用v-model的值去做监听
     */
    // 总选事件
    onAllCheckedChange() {
      this.list.forEach((item) => {
        item.checked = this.allChecked
      })
    },
    // 反选事件
    onCheckedItemChange(item) {
      this.allChecked = this.list.every((item) => {
        return item.checked
      })
    },
    // 删除事件按钮
    onRemoveItem(item) {
      this.list.splice(
        this.list.findIndex((v) => v.id === item.id),
        1
      )
    },
  },
}
</script>

<style lang="scss">
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}
* {
  margin: 0;
  padding: 0;
  list-style: none;
  box-sizing: border-box;
}
html,
body,
#app {
  width: 100%;
  height: 100%;
}

.dialog {
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  .mask {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: black;
    opacity: 0.6;
  }
  .dialog-content {
    width: 60%;
    padding: 20px;
    max-height: 60%;
    // height: 60%;
    background: #fff;
    z-index: 10;
  }
}

.container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.header {
  // height: 50px;
  position: relative;
}
.main {
  flex: 1;
  overflow: auto;
  .main-content {
    .main-content-item {
      border: 1px solid #ccc;
      margin: 5px;
      padding: 5px;
      span {
        padding: 5px 10px;
        margin: 5px;
        font-size: 25px;
      }
      .edit,
      .remove {
        background: rgb(237, 36, 9);
        border-radius: 5px;
        color: #fff;
        // padding: 5px 10px;
        // margin: 3px;
        // font-size: 25px;
      }
    }
  }
}
.footer {
  background: orange;
  height: 50px;
}
</style>
